window.addEventListener('load', function(){
    var arrow_l = document.querySelector('.arrow-l');
    var arrow_r = document.querySelector('.arrow-r');
    var focus = document.querySelector('.focus');
    // 获取元素
    var arrow_l = document.querySelector('.arrow-l');
    var arrow_r = document.querySelector('.arrow-r');
    var focus = document.querySelector('.focus');
    var focusWidth = focus.offsetWidth;         // 父盒子可视宽度
    // 鼠标经过显示箭头
    focus.addEventListener('mouseenter', function(){
        arrow_l.style.display = 'block';
        arrow_r.style.display = 'block';
        // 鼠标放上去之后就停止动画播放
        clearInterval(timer);
        // 因为timer不用了,最好清空
        timer = null;
    })
    // 鼠标离开显示箭头
    focus.addEventListener('mouseleave', function(){
        arrow_l.style.display = 'none';
        arrow_r.style.display = 'none';
        // 11、鼠标离开,开启不需要重新var
        timer = setInterval(function(){
            arrow_r.click();
        }, 2000);
    })
    

    // 2、动态生成小圆圈，有几张图片就生成几个小圆圈
    var ul = focus.querySelector('ul');
    var ol = focus.querySelector('.circle');
    var lis = ul.children;
    // 循环创建li，并插入到ol里面
    for (var i = 0; i < lis.length; i++){
        var li = document.createElement('li');
        ol.appendChild(li);
        // 给每个ol的li添加一个index属性,记录当前小圆圈的索引号，通过自定义属性来做（4、）
        li.setAttribute('index', i);
        li.addEventListener('click', function(){
            // 3、当点击小圆圈时，会变色选中，也会显示对应的图片
            // 排他思想(其实重复了，创建的同时就可以绑定事件了)
            for (var i = 0; i < ol.children.length; i++){
                ol.children[i].className = '';
            }
            this.className = 'current';
            // 4、当点击小圆圈时，会滑动哈哈哈，也会显示对应的图片（纯自己完成！！！哈哈哈）
            // 注意ul的移动距离是复数
            // var target = -ul.children[0].clientWidth * this.getAttribute('index');
            
            var index = this.getAttribute('index');     // 当前的索引号
            // 当我们点击了li，就要拿到当前的点击的索引号赋值给全局变量，因为变量提升，所以ok
            // 这样你点击了第几张图就会将索引与num绑定在一起，而不是num始终初始为0
            num = index;                                // !!!!!!!!!!!
            circle = index;
            var target = -focusWidth * index;
            animate(ul, target);
        })
    }
    // 给第一个小圆圈添加一个 current 类
    ol.children[0].className = 'current';
    
    // // 有人说利用冒泡！！！不行哎，因为点击圆圈中间的空隙就会整体ol消失，除此之外都可以
    // // 知道为啥消失吗，因为你没点击到目标的话就会因为排他思想使所有的li清除class？？
    // ol.addEventListener('click', function(e){
    //     for (var i = 0; i < ol.children.length; i++){
    //         ol.children[i].className = '';
    //     }
    //     e.target.className = 'current';
    // })
    

    
    // 4、当点击左右箭头的时候，会有动画
    // 我这么写会造成还没播放完动画就随着点击开始新的移动，所以最好用数字++这样保证步长的唯一性
    // arrow_r.addEventListener('click', function(){
    //     var focusWidth = focus.offsetWidth;         // 721
    //     var ulLeft = ul.offsetLeft;
    //     console.log(ulLeft);
    //     // 右箭头，ul左移
    //     var ulLeftMax = -(ol.children.length - 1) * focusWidth;      // -2163
    //     var target = ulLeft - focusWidth;
    //     console.log(target);
    //     if (ulLeft > ulLeftMax){
    //         animate(ul, target);
    //     }
    // })
    
    // 但是可不可以自动添加呢？可以，深克隆浅克隆
    // 6、克隆第一张图片，放到ul的最后面   深克隆(因为不会影响前面的ol创建)
    var first = ul.children[0].cloneNode(true);
    ul.appendChild(first);
    var num = 0;
    var circle = 0;                 // circle控制小圆圈的播放(全局变量)
    // 节流阀!!!
    var flag = true;
    // 5、点击右侧的按钮
    arrow_r.addEventListener('click', function(){
        if (flag){
            flag = false;
            // 按理说到最后一张图再点击应该回到第一张图
            // 无缝滚动
            // 把第一个孩子复制一份放到最后的位置，在HTML代码里哈
            // 但是多了一个圈圈！！！
            if (num == ul.children.length - 1){
                num = 0;
                ul.style.left = 0;      // 快速复原！！！  
            }
            num++;
            var target = -num * focusWidth;
            animate(ul, target, function(){
                // 动画执行完毕,打开水龙头
                flag = true;
            });

            // 7、小圆圈会一起变化
            circle ++;
            // 但是这样做的话，等circle增加到一定，就所有的都清除了，因为一直加加
            // 加个判断
            if (circle == ol.children.length){
                circle = 0;
            }
            circleChange();
            // // 排他
            // for (var i = 0; i < ol.children.length; i++){
            //     ol.children[i].className = '';
            // }
            // ol.children[circle].className = 'current';
        }
    })
    // BUG1:
    // 这里有一个bug，就是我们点击li圆圈的事件没有与箭头的点击事件绑定
    // 所以当点击圆圈的时候，num要一起变化，而不是从0开始，拿到索引号
    // 80行num=0不能删掉=0!!!因为变量提升问题不大,只要点击了就会改变,因为写在上面的代码不一定是先执行的
    // 43-44行多加一个代码

    // BUG2:
    // 也要给circle
    // 81行
    // 45行


    // 8、点击左侧的按钮
    arrow_l.addEventListener('click', function(){
        if (flag){
            flag = false;
            if (num == 0){
                num = ol.children.length;
                // 怪不得!!!
                ul.style.left = -num*focusWidth + 'px';
            }
            num --;
            // 这行代码居然不变
            animate(ul, -num * focusWidth, function(){
                flag = true;
            });
            circle--;
            
            // if (circle < 0) {
            //     circle = ol.children.length - 1;
            // }
            circle = circle < 0 ? ol.children.length - 1 : circle;
            circleChange();
            // 这部分可以封装函数!!!
            // for (var i = 0; i < ol.children.length; i++){
            //     ol.children[i].className = '';
            // }
            // ol.children[circle].className = 'current';
        }
    })

    function circleChange(){
        for (var i = 0; i < ol.children.length; i++){
            ol.children[i].className = '';
        }
        ol.children[circle].className = 'current';
    }
    

    // 9、什么操作都没有的时候就自动播放动画
    var timer = setInterval(function(){
        // 相当于点击了右侧的按钮!!!
        // 直接复制粘贴太麻烦
        // 手动调用事件
        arrow_r.click();
    }, 2000);


    // 10、鼠标放上去之后就停止动画播放
    // 第12行的代码

    
    // 延申___节流阀
    // 利用回调函数,添加一个变量来控制,锁住函数和解锁函数
})

